add task solution #4931
add task solution #4931
Conversation
There was a problem hiding this comment.
Great job on your code! 😊 However, I would suggest making some changes to the class names in your CSS to be more descriptive and using semantic tags in your HTML. These changes will make your code more readable and accessible. Keep up the good work! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/index.html
Outdated
| @@ -13,6 +13,52 @@ | |||
| /> | |||
| </head> | |||
| <body> | |||
There was a problem hiding this comment.
It's a good practice to use semantic tags in your HTML. Consider wrapping your .stars divs with a <section> tag. This will improve the semantic meaning of your HTML and help screen readers understand your content structure better.
src/index.html
Outdated
| @@ -13,6 +13,52 @@ | |||
| /> | |||
| </head> | |||
| <body> | |||
| <h1>Stars</h1> | |||
| <div class="stars stars--0"> | |||
There was a problem hiding this comment.
The class name stars--0 doesn't provide a clear understanding of what it represents. Consider renaming it to something more descriptive, like stars--none.
src/index.html
Outdated
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--1"> |
There was a problem hiding this comment.
The class name stars--1 could be more descriptive. Consider renaming it to something like stars--one.
src/index.html
Outdated
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--2"> |
There was a problem hiding this comment.
The class name stars--2 could be more descriptive. Consider renaming it to something like stars--two.
src/index.html
Outdated
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--3"> |
There was a problem hiding this comment.
The class name stars--3 could be more descriptive. Consider renaming it to something like stars--three.
src/index.html
Outdated
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--4"> |
There was a problem hiding this comment.
The class name stars--4 could be more descriptive. Consider renaming it to something like stars--four.
src/index.html
Outdated
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--5"> |
There was a problem hiding this comment.
The class name stars--5 could be more descriptive. Consider renaming it to something like stars--five.
There was a problem hiding this comment.
Great job! Your code is generally well-structured and follows best practices. There are just a few minor formatting issues to address for future improvements. Keep up the good work! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <link | ||
| rel="stylesheet" | ||
| href="./style.css" | ||
| href="././styles/style.css" | ||
| /> |
There was a problem hiding this comment.
Same here. Each attribute should be on a new line with 2-space indentation.
| @@ -9,10 +9,56 @@ | |||
| <title>Stars</title> | |||
| <link | |||
| rel="stylesheet" | |||
| href="./style.css" | |||
| href="././styles/style.css" | |||
There was a problem hiding this comment.
The value of the href attribute seems to be incorrect. It should be ./styles/style.css instead of ././styles/style.css.
| <section class="stars stars--0"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements. Each level of nesting, including text, contained inside the element, requires 2-space offset. Also blank line shouldn't be between parent and child elements.
| <section class="stars stars--1"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements.
| <section class="stars stars--2"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements.
| <section class="stars stars--3"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements.
| <section class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements.
| <section class="stars stars--5"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements.
DEMO LINK
TEST REPORT LINK
Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
Each BEM block has its own separate file
All
Typical MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️